<template>
  <div>
    <el-dialog
      title="二维码和分享"
      :visible.sync="dialogVisible"
      width="750px"
      :close-on-click-modal="false"
      @close="close"
    >
      <div v-loading="loading">
        <div class="content">
          <div class="qr-code">
            <img v-if="qrCodeUrl" :src="qrCodeUrl" alt>
          </div>
          <div v-if="row&&maInfo.DEFAULT.auth">
            <div class="cell-item">
              <span>活动名称：</span>
              <span>{{ row.theme }}</span>
            </div>
            <div class="cell-item">
              <span>当前状态：</span>
              <el-tag v-if="row.status===1" size="mini" type="success">启用中</el-tag>
              <el-tag v-if="row.status===2" size="mini" type="danger">已暂停</el-tag>
              <el-tag v-if="row.status===3" size="mini" type="info">已终止</el-tag>
            </div>

            <div class="cell-item">
              <span>小程序原始ID：</span>
              <span>{{ maInfo.DEFAULT.auth.base.userName }}</span>
            </div>
            <div class="cell-item">
              <span>小程序APPID：</span>
              <span>{{ maInfo.DEFAULT.auth.base.appId }}</span>
            </div>
            <div class="cell-item">
              <span>小程序路径：</span>
              <span>pages/memberCardModule/pages/consumeActivityDetail/main?scene={{ row.activityCode }}</span>
            </div>
            <div class="tips">
              微信扫一扫即可参与活动，你可将二维码放到海报中或者制作成店内物料（台卡，易拉宝等）让顾客参与活动。
              <!-- 如果你希望投放到微信广告，可复制以下参数前往配置，点击了解
              <a
                href="https://help.ikudot.com/v2/#/docs/booking/intro/%E9%85%92%E5%BA%97%E5%85%A8%E6%97%A5%E6%88%BF%E9%A2%84%E8%AE%A2"
                class="app-text-color-primary"
                target="_blank"
              >
                <u>怎么投放微信广告?</u>
              </a>-->
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getWxQrCodeByScene } from '@/api/wxCode'
export default {
  data() {
    return {
      // 配置
      resolve: null,
      reject: null,
      //  状态
      dialogVisible: null,
      loading: false,
      // 数据
      row: '',
      qrCodeUrl: ''
    }
  },
  computed: {
    ...mapGetters(['maInfo'])
  },
  methods: {
    /**
       * 获取数据
       */
    // 获取二维码
    getQrcode() {
      const params = {}
      params.appId = this.$store.state.wechat.maInfo.DEFAULT.appId
      params.page = 'pages/sendCard/main'
      params.scene = this.row.activityCode
      this.loading = true
      getWxQrCodeByScene(params)
        .then(res => {
          this.qrCodeUrl = res.data
        })
        .finally(() => {
          this.loading = false
        })
    },

    open(row) {
      this.row = row
      this.getQrcode()
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    close() {
      this.loading = false
      this.qrCodeUrl = ''
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  // .title {
  //   text-align: center;
  //   font-size: 18px;
  //   font-weight: bold;
  // }
  .cell-item {
    display: flex;
    margin-bottom: 12px;
    span:first-child {
      flex: 0 0 105px;
      text-align: justify;
      text-align-last: justify;
    }
    span:last-child {
      word-break: break-all;
    }
  }
  .content {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .qr-code {
      width: 220px;
      height: 220px;
      flex: 0 0 220px;
      margin-right: 50px;
    }
  }
  .tips {
    margin-top: 30px;
  }
</style>
